<template>
  <el-container>
    <el-aside  :width="width">
      <Aside ref="asideRef" :width="width"/>
    </el-aside>
    <el-container>
      <el-header height="60px" style="padding: 0 0">
        <Header @findAllMenu='findAllMenu'/>
      </el-header>
      <el-main style="background-color: #F0F1F4;height: 900px">

        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
        <nuxt-child />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import Header from '~/components/Header'
  import Aside from '~/components/Aside'

  export default {
    components: {
      Aside,
      Header,
    },
    data(){
      return{
        width:'250px'
      }
    },
    methods:{
      findAllMenu(id){
        this.$refs.asideRef.findAllMenu(id);
      }
    }
  }
</script>

<style>
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>
